<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通义千问聊天</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    #chat-container {
      border: 1px solid #ccc;
      padding: 10px;
      height: 300px;
      overflow-y: auto;
      margin-bottom: 10px;
    }
    #input-container {
      display: flex;
    }
    #input-message {
      flex: 1;
      padding: 5px;
    }
    #send-button {
      padding: 5px 10px;
    }
  </style>
</head>
<body>
<div id="chat-container"></div>
<div id="input-container">
  <input type="text" id="input-message" placeholder="输入聊天内容">
  <button id="send-button">发送</button>
</div>

<script>
  const chatContainer = document.getElementById('chat-container');
  const inputMessage = document.getElementById('input-message');
  const sendButton = document.getElementById('send-button');

  sendButton.addEventListener('click', async () => {
    const message = inputMessage.value;
    if (message.trim() === '') return;

    // 显示用户输入
    const userMessageElement = document.createElement('p');
    userMessageElement.textContent = `你: ${message}`;
    chatContainer.appendChild(userMessageElement);

    // 清空输入框
    inputMessage.value = '';

    try {
      // 发送请求到后端
      const response = await fetch('/app/ai/chat?message=' + encodeURIComponent(message));
      const data = await response.text();

      // 显示通义千问的响应
      const aiMessageElement = document.createElement('p');
      aiMessageElement.textContent = `通义千问: ${data}`;
      chatContainer.appendChild(aiMessageElement);
    } catch (error) {
      console.error('请求出错:', error);
    }
  });
</script>
</body>
</html>